<template>
  <view class="page">
    <view class="enWord">{{ enWord }}</view>
    <view class="item">
      <view class="label">反馈内容</view>
      <view class="value">
        <view class="input-container">
          <textarea v-model="inputForm.feedbackDesc" placeholder="请描述你所遇到的问题" style="width: 100%" :maxlength="-1" />
        </view>
      </view>
    </view>
    <view class="item">
      <imageUpload v-model="inputForm.feedbackImg" :allowDelete="true" :upload-params="{ dir: 'word-error-correction' }"></imageUpload>
    </view>
    <view class="submit-btn-container">
      <view class="submit-btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
import imageUpload from "@/components/imageUpload/index.vue"
import { showModalPromise, showToast } from "@/utils"
import request from "@/utils/request"

export default {
  components: { imageUpload },
  data() {
    return {
      queryParams: {
        wordId: "",
        thesaurusId: "",
      },
      inputForm: {
        feedbackDesc: "", // 反馈描述
        feedbackImg: "", // 反馈图片
      },
      enWord: "",
    }
  },
  onLoad(query) {
    this.queryParams.wordId = query.wordId
    this.queryParams.thesaurusId = query.thesaurusId
    this.enWord = query.enWord
  },
  methods: {
    submit() {
      // 检查表单输入
      if (!this.inputForm.feedbackDesc) {
        showToast.error("请填写反馈内容")
        return
      }
      request({
        url: "wordErrorRecord/submitFeedBack",
        data: {
          ...this.queryParams,
          ...this.inputForm,
        },
        errorHandle: true,
        showLoading: true,
      }).then(async () => {
        await showModalPromise({
          title: "提示",
          content: "感谢您的反馈，我们将尽快处理",
          showCancel: false,
        })
        uni.navigateBack()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx;
	> .enWord {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		padding: 60rpx 0;
	}
  > .item {
    margin-bottom: 40rpx;
    > .label {
      font-size: 34rpx;
    }
    > .value {
      margin-top: 20rpx;
      font-size: 30rpx;
      > .input-container {
        border-radius: 10rpx;
        padding: 20rpx;
        background: var(--gray-background-color);
        height: 360rpx;
        overflow: auto;
      }
    }
  }
  > .submit-btn-container {
    position: fixed;
    left: 0;
    bottom: calc(50rpx + env(safe-area-inset-bottom));
    width: 100%;
    > .submit-btn {
      margin: 0 auto;
      width: calc(100% - 60rpx);
      background: var(--theme-color);
      color: white;
      padding: 20rpx 0;
      text-align: center;
      border-radius: 41rpx;
    }
  }
}
</style>
